<template>
  <div>
<p>原始的字符串：{{ msg }}</p>
<p>反转后的字符串:{{ msg.split('').reverse().join('') }}</p>
<p>方法反转后的字符串:{{reverseMsg2()  }}</p>
<p>方法反转后的字符串:{{reverseMsg2()  }}</p>


<p>计算属性反转后的字符串:{{reverseMsg }}</p>
<p>计算属性反转后的字符串:{{reverseMsg }}</p>
<hr>
单价：<input type="text" v-model="price">
数量：<input type="number" v-model="myCount">
合计：<input type="text" v-model="total">
  </div>
</template>

<script setup>
import { ref,reactive,computed } from 'vue'
let myCount = ref(1)
let price = ref(0)
let total= computed(() => {
  console.log('计算了一次');
return price.value * myCount.value
})
const msg= ref('guidian');
let count = 1;
function reverseMsg2(params) {
  count++;
  return count+'---'+msg.value.split('').reverse().join('')
};
//计算属性是基于他们的响应式依赖进行缓存的，只有相关的响应式依赖发生变化的时候它才会从新计算。
const reverseMsg = computed(() => {
  count++
  return count+'---'+msg.value.split('').reverse().join('')
})
</script>

<style scoped>

</style>